<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- <span style="color: red"></span> -->
  </body>

  <script>
    // let str = '我爱我家'

    // //g global 全局匹配搜索
    // //i ignore 忽略大小写
    // str = str.replace(/我/g, '<span style="color: red">我</span>')

    // let str3 = 'abcdgdc'

    // str3 = str3.replace(/c/g, '<span>C</span>')
    // document.body.innerHTML = str3

    // let str4 = 'abcdgdc'
    // str4 = str4.replace(/c/g, function (item) {
    //   console.log(item)
    //   return 'C'
    // })
    // document.body.innerHTML = str4
    let str = 'abcadefag'
    function hightLight(str, keyword) {
      const reg = new RegExp(keyword, 'gi')
      return str.replace(reg, function (item) {
        return `<span style="color: red">${item}</span>`
      })
    }

    console.log(hightLight('abcadefag', 'a'))
    str = hightLight(str, 'a')
    document.body.innerHTML = str
  </script>
</html>
